<template>
  <!-- 会员列表 -->
  <div class="pagss">

    <div style="height: 20px;"></div>
    <Navvz></Navvz>

    <div style="padding: 50px 20px 50px 20px;">

      <div class="row_a_c pu_20 space-between">
        <div class="row_a_c">
          <img class="tu1" src="@/assets/images/sz.png" />
          <div class="ml_10 f_22 f_bold">游戏权限设置</div>
        </div>
      </div>

      <el-checkbox-group v-model="game_permission">
        <div class="mb_10 p_30" style="background: #fff;border-radius: 10px;" v-for="itemf in gameListz">
          <el-row type="flex" :gutter="20">
            <el-col :xs="10" :sm="6" :md="5" :lg="4" :xl="3" v-for="item in itemf" :key="item.ulid">
              <el-checkbox :label="item.ulid">{{item.title}}</el-checkbox>
            </el-col>
          </el-row>
        </div>
      </el-checkbox-group>


      <div class="handle-box center">
        <el-button type="primary" class="handle-del mr10 mb_20 mt_10" style="width: 200px;height: 50px;" @click="editSubmit()">确 认 修 改</el-button>
        <el-button type="primary" class="handle-del mr10 mb_20 mt_10" style="width: 200px;height: 50px;" @click="toUrl('/center/bypassAccount')">返 回</el-button>
      </div>


    </div>

  </div>
</template>

<script>
  import Navvz from "@/components/Navvz";
  import * as UserPermission from "@/api/system/user_permission";
  import * as Version from '@/api/system/version';
  export default {
    components: {
      Navvz,
    },
    data() {
      return {
        loading: false,
        id: '',
        user_id: '', //用户ID
        pid: '',
        gameList: [], //游戏列表
        gameListz: [], //游戏列表
        game_permission: [], //游戏列表权限

        // 游戏列表查询参数
        queryParams: {
          noPage: 1,
          pageSize: 100
        },

      };
    },
    created() {
      this.user_id = this.$route.query.user_id;
      this.pid = this.$route.query.pid;
      this.getinfo();
      this.getGameList(); //游戏列表
    },

    methods: {


      chunkArray(array, size) {
        const chunkedArr = [];
        let i = 0;
        while (i < array.length) {
          chunkedArr.push(array.slice(i, i + size));
          i += size;
        }
        return chunkedArr;
      },

      /** 查询游戏列表 */
      getGameList() {
        this.queryParams.user = this.pid
        this.queryParams.type_pj = 1
        this.queryParams.type = 1
        this.loading = true;
        Version.getList(this.queryParams).then(response => {
          this.gameList = response.data.list;
          this.gameListz = this.chunkArray(this.gameList, 9)
          this.loading = false;
        });
      },
      //查询用户权限详情
      getinfo() {
        var p = {
          user_id: this.user_id,
          product: 'biqi-developer-platform',
        };

        UserPermission.info(p).then(response => {
          if (response.data.game_permission) {
            this.game_permission = response.data.game_permission;
          }

          this.loading = false;
        });

      },
      //编辑提交
      editSubmit() {
        var p = {
          user_id: this.user_id,
          pid: this.pid,
          product: 'biqi-developer-platform',
          game_permission: this.game_permission,
        };

        console.log('p', p)
        this.loading = true;
        UserPermission.update(p).then(response => {
          this.$modal.msgSuccess('修改成功');
          this.loading = false;
          this.toUrl('/center/bypassAccount')
        });

      },

      toUrl(url) {
        this.$router.push({
          path: url,
        })
      },

    }
  };
</script>

<style lang="scss" scoped>
  .pagss {
    height: 100%;
    background: #E4EEF9;
  }

  .tu1 {
    width: 21px;
    height: 17px;
  }


  ::v-deep .el-checkbox__label {
    font-size: 22px;
  }

  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
    zoom: 150%;
    border-radius: 50% !important;
  }

  ::v-deep .el-checkbox__inner {
    zoom: 150%;
    border-radius: 50% !important;
  }

  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner::after {
    margin-left: 0.5px;
  }
</style>